<template>
  <BoTable
    :columns="columns"
    :request="list"
    ref="tableRef"
    height="auto"
    :row-selection="rowSelection"
    row-key="id"
  >
    <template #toolbars>
      <Space :size="8">
        <ImportModel @import-after="() => tableRef.refresh()"></ImportModel>
        <Button type="primary" :disabled="!selectKeys.length" @click="onDelete">
          删除
        </Button>
      </Space>
    </template>
  </BoTable>
  <Modal
    v-model:open="visible"
    :title="false"
    destroyOnClose
    wrap-class-name="view_modal"
    width="100%"
    :footer="false"
  >
    <triggerData
      :options="options"
      title="实时波形数据"
      show-witch="realTime"
      :deviceInfo="[code]"
    >
      <template #header></template>
    </triggerData>
  </Modal>

  <FormModal :columns="item"> </FormModal>
</template>

<script setup lang="tsx">
import { computed, nextTick, onMounted, ref, useId } from 'vue';
import { createOlMap, useFormModal } from '@boeyo/hooks';
import {
  BoForm,
  BoFormProps,
  BoTable,
  BoTableProps,
  BoUploadExcel,
  ConfigProvideProps,
  ConfigProvider,
} from '@boeyo/ui';
import { Button, Modal, Space, Switch, message } from 'ant-design-vue';
import triggerData from '@/components/triggerData/index.vue';
import { list, stationsNetworkDelete, stationsNetworkUpdate } from './api';
import ImportModel from './components/ImportModel.vue';

const options = computed(() => {
  return {
    leftTool: [],
  };
});
const item = computed<BoFormProps['columns']>(() => [
  {
    title: '台站名称',
    dataIndex: 'stationName',
    valueType: 'input',
  },
  {
    title: '经度(°)',
    dataIndex: 'longitude',
    valueType: 'input',
  },
  {
    title: '纬度(°)',
    dataIndex: 'latitude',
    valueType: 'input',
  },
  {
    title: '高程(m)',
    dataIndex: 'altitude',
    valueType: 'input',
  },
]);
const tableRef = ref();
const selectKeys = ref<number[]>([]);
const rowSelection = computed<BoTableProps['rowSelection']>(() => {
  return {
    onChange(values) {
      selectKeys.value = values as number[];
    },
  };
});
const code = ref('');
const visible = ref(false);
const { FormModal, open } = useFormModal({
  size: 'small',
  column: 1,
});

const columns = computed<BoTableProps['columns']>(() => [
  {
    title: '台网代码',
    dataIndex: 'networkCode',
  },
  {
    title: '台站代码',
    dataIndex: 'stationCode',
  },
  {
    title: '台站名称',
    dataIndex: 'stationName',
  },
  {
    title: '高程(m)',
    dataIndex: 'altitude',
    hideInSearch: true,
  },
  {
    title: '经度(°)',
    dataIndex: 'longitude',
    hideInSearch: true,
  },

  {
    title: '纬度(°)',
    dataIndex: 'latitude',
    hideInSearch: true,
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    hideInSearch: true,
  },
  {
    title: '操作',
    dataIndex: 'operation',
    hideInSearch: true,
    actions: [
      {
        text: '实时数据',
        onClick(record) {
          code.value = `${record.networkCode}.${record.stationCode}`;
          console.log(code.value, '1');

          visible.value = true;
          // onRealTime(record);
        },
      },
      {
        text: '详情',
        onClick(record) {
          // code.value = `${record.networkCode}.${record.stationCode}`;
          // console.log(code.value, '1');
          // visible.value = true;
          // // onRealTime(record);
          console.log('11');
          open({
            title: (type) => (type === 'info' ? '详情' : '编辑'),
            modalType: 'info',
            request: async (params) => {
              await stationsNetworkUpdate(params);
              tableRef.value.refresh();
              // appendDom(e, params.deviceType);
              // message.success('操作成功!');
            },
            defaultValue: record,
          });
        },
      },
    ],
  },
]);

const onDelete = () => {
  const ids = selectKeys.value.join(',');

  Modal.confirm({
    title: '删除',
    content: '确定删除此条数据吗？',
    okText: '确定',
    cancelText: '取消',
    onOk: async () => {
      await stationsNetworkDelete(ids);
      tableRef.value.refresh();
    },
  });
};
</script>

<style lang="scss" scoped>
:deep(.ant-btn-default) {
  &.custom_btn {
    border: none !important;
  }
}

:deep(.ant-table-cell) {
  .ant-btn-primary {
    background: transparent !important;
  }
}
</style>
<route lang="json">
{
  "name": "站网管理",
  "meta": {
    "title": "站网管理"
  }
}
</route>
